<script setup>
import {useCountTimeStore} from "./time_count";
import {BaseImgUrl} from "../utils/lshttp";
import CacheImage from "../components/CacheImage.vue";
import {ref} from "vue";
import {onShow} from "@dcloudio/uni-app";

const {
  isVIP,
  show,
  showPay,
  NewPayType,
  payTypeList,
  listGold,
  config,
  urlCountData,
  btnText,
  mtLink,
  isStart,
  timeCount,
  showMessage,
  messageTitle,
  showGetTip,
  discountConfigList,
  isShowTC,
  buyGold,
  clickItem,
  close,
  showTip,
  toJCOne,
  toJCTow,
  NewradioChange,
  setTimeStart,
  saveMTLink,
  toGetRedBag,
  getTaskInfo,
  toFuLi,
  toWeb,
  showTC,
  showFK,
  showFKTip,
  fkLink,
  toMakeMoney,
  buyGoldClick,
  clickDiscountConfigItem,
  toJCThree,
  openErr,
} = useCountTimeStore()


const isShowBackHome = ref(false)

const goBack = () => {
  if (isShowBackHome.value) {
    uni.switchTab({url: '/pages/index/index'})
  } else {
    uni.navigateBack()
  }
}

onShow(() => {
  let pages = getCurrentPages()
  isShowBackHome.value = pages.length === 1;
})

</script>

<template>
  <!-- #ifdef MP || APP-->
  <u-status-bar></u-status-bar>
  <u-navbar title="领取美团神券" :autoBack="true" bgColor="#e42e1c" leftIconColor="#FFFFFF">
    <template #left>
      <up-icon
          v-if="!isShowBackHome"
          name="arrow-left"
          size="19"
          color="#FFFFFF"
          @click="goBack"
      ></up-icon>
      <view class="u-nav-slot" v-else @click="goBack">
        <up-icon
            name="arrow-left"
            size="19"
            color="#FFFFFF"
        ></up-icon>
        <up-line
            direction="column"
            :hairline="false"
            length="16"
            color="#FFFFFF"
            margin="auto 8px"
        ></up-line>
        <up-icon
            name="home"
            size="20"
            color="#FFFFFF"
        ></up-icon>
      </view>
    </template>
    <template #center>
      <text style="color: white;font-size: 28rpx">领取美团神券</text>
    </template>
  </u-navbar>
  <!-- #endif -->
<!--  <cache-image :src="BaseImgUrl + '/fuli/rbg.png'" width="750rpx"-->
<!--               height="1800rpx" style="position: absolute;z-index: 0"></cache-image>-->
  <image :src="BaseImgUrl + '/fuli/rbg.png'" style="width: 750rpx;height: 1800rpx;position: absolute;z-index: 0"></image>
  <!-- #ifdef MP || APP-->
  <view>
    <view style="height: 44px"></view>
  </view>
  <!-- #endif -->
  <view class="notice_box">
    <up-notice-bar text="温馨提示：请务必间隔10分钟后再尝试重新领取，注意距离上次上次领取不得小于12小时~"></up-notice-bar>
  </view>
  <view style="margin: 60rpx 20rpx;position: relative">
    <view class="title" @click="toMakeMoney">领食周边购霸王餐 每天0-5元吃外卖</view>
    <view style="height: 68rpx"></view>
    <view style="display: flex;align-items: center;font-size: 26rpx;justify-content: center">
      <view class="my_gold">我的金币：{{ config?.my_gold_coin ? config?.my_gold_coin : 0 }}个</view>
      <view style="width: 20rpx"></view>
      <view style="width: 160rpx">
        <up-button
            text="充值金币"
            size="mini"
            shape="circle"
            @click="show=true"
            :customStyle="{width: '120rpx',backgroundColor: '#ffba3d',color: '#fff'}"
        ></up-button>
      </view>
    </view>
    <view style="height: 88rpx"></view>
    <view class="get_red_bag">
      <view style="position: absolute">
        <cache-image img-src="https://lsz.lszbg.com/imgs/fuli/redbag2.png"
                     height="760rpx" width="750rpx" :style="{position:'absolute'}"/>
      </view>
<!--      <cache-image :src="BaseImgUrl+'/fuli/redbag2.png'" width="750rpx" height="760rpx"-->
<!--                   :style="{position:'absolute'}"></cache-image>-->
<!--            <image :src="BaseImgUrl + '/fuli/redbag2.png'" style="width: 750rpx;height: 760rpx;position: absolute"></image>-->
      <view style="position: relative;padding: 0 80rpx">
        <!--        <view style="font-size: 26rpx;color: #ffba3d">领取大颔美团神券</view>-->
        <view style="height: 150rpx"></view>
        <up-input placeholder="请输入美团账号链接" v-model="mtLink" :customStyle="{backgroundColor: '#FFFFFF'}" maxlength="500">
          <template #suffix>
            <up-button
                @tap="saveMTLink"
                text="保存/修改"
                type="primary"
                shape="circle"
                size="mini"
            ></up-button>
          </template>
        </up-input>
        <view style="height: 30rpx"></view>
        <view style="display: flex;align-items: center;font-size: 26rpx">
          <view style="color: #666666;margin-left: 6rpx">今日剩余领取次数：{{ urlCountData?.user_count }}次</view>
          <view style="flex: 1"></view>
          <view>
            <view style="color:#4185cb;margin-right: 10rpx" @click="showTip">点我获账号链接</view>
          </view>
        </view>
        <view style="color:#77777d;text-align: center;margin-top: 38rpx;font-size: 24rpx">
          {{ isVIP ? "会员领取无需消耗金币" : "本次领取需消耗200金币" }}
        </view>
      </view>
      <view
          style="background-color: #f8f8f800;position: absolute;bottom: 120rpx;height: 120rpx;width: 80%;margin-left: 10%;z-index: 1"
          @tap="showTC()"></view>
    </view>
    <view style="height:20rpx"></view>
    <view style="height:20rpx"></view>
    <view
        style="display: flex;justify-content: space-between;padding: 20rpx 20rpx;background-color: #FFFFFF56;border-radius: 10rpx">
      <view @click="toJCOne" class="image_content">
        <cache-image img-src="https://lsz.lszbg.com/imgs/fuli/jc.png"
                     height="188rpx" width="188rpx" :style="{borderRadius:'10rpx'}"/>
      </view>
      <view @click="toJCTow" class="image_content">
        <cache-image img-src="https://lsz.lszbg.com/imgs/fuli/failed.png"
                     height="188rpx" width="188rpx" :style="{borderRadius:'10rpx'}"/>
      </view>
      <view @click="showFK = true" class="image_content">
        <cache-image img-src="https://lsz.lszbg.com/imgs/fuli/fk.png"
                     height="188rpx" width="188rpx" :style="{borderRadius:'10rpx'}"/>
      </view>
    </view>
    <view style="height: 100rpx"></view>
  </view>
  <u-popup :show="showGetTip" mode="center" :round="10" width="80%" closeable @close="close">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">如何获取账号连接</view>
    <view class="popup_box1">
      <cache-image src="https://lsz.lszbg.com/public/uploads/suibian.jpg"
                   style="width: 100%;height: 720rpx;"></cache-image>
    </view>
    <view style="margin: 60rpx 50rpx 30rpx;display: flex">
      <up-button
          @tap="toWeb"
          text="我知道了"
          color="#fd980e"
          size="normal"
          shape="circle"
      ></up-button>
    </view>
  </u-popup>
  <u-popup :show="showFK" mode="center" :round="10" width="80%" closeable @close="close">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">解除风控</view>
    <view style="width: 560rpx;padding-top: 40rpx;margin: 0 30rpx">
      <up-input placeholder="请输入账号解封链接" v-model="fkLink" :customStyle="{backgroundColor: '#FFFFFF'}" clearable>
      </up-input>
      <view style="text-align: left;margin: 16rpx 0;font-size: 24rpx;color: #ff371d">
        ✲此链接不是红包领取链接
      </view>
      <view style="margin: 38rpx 50rpx 30rpx;display: flex">
        <up-button
            @tap="openErr"
            text="解除账号风控"
            color="#3dc18c"
            size="normal"
            shape="circle"
        ></up-button>
      </view>
      <view style="text-align: center;margin: 26rpx 0;font-size: 26rpx;color: #6aaeff" @click="toJCThree">
        查看解除风控教程
      </view>

    </view>
  </u-popup>
  <u-popup :show="showFKTip" mode="center" :round="10" width="80%" @close="close">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">提示</view>
    <view style="width: 560rpx;padding-top: 40rpx;margin: 0 30rpx">
      <view
          style="text-align: left;margin: 16rpx 0;font-size: 28rpx;line-height:53rpx;letter-spacing:5rpx;color: #a4a4a4">
        已提交解除，请尝试重新获取账号链接领取神券套餐，若依然无法领取则换号或隔段时间再领!
      </view>
      <view style="margin: 38rpx 50rpx 30rpx;display: flex">
        <up-button
            @tap="close"
            text="确定"
            color="#3dc18cCC"
            size="normal"
            shape="circle"
        ></up-button>
      </view>
    </view>
  </u-popup>
  <u-popup :show="isShowTC" mode="bottom" :round="10" width="80%" closeable @close="close">
    <view style="display: flex;flex-direction: column;">
      <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">请选择红包套餐</view>
      <view style="flex: 1;background-color: #f8f8f8;margin-top: 20rpx;">
        <scroll-view scroll-y="true" style="height: 888rpx;">
          <view v-for="(item,index) in discountConfigList" :key="index"
                style="display: flex;flex-direction: column;align-items: center;margin: 20rpx 20rpx 0"
                @click="clickDiscountConfigItem(item)">
            <view style="background-color: white;padding: 20rpx;border-radius: 20rpx;box-sizing: border-box;width: 100%"
                  :class="item.isSelect?'select':'unSelect'">
              <view style="display: flex">
                <view style="font-size: 28rpx;color: black;flex: 1">{{ item.title }}</view>
                <view style="text-align: center;color: #ff5c26;font-size: 26rpx;font-weight: bold">{{
                    item.status === 0 ? '可选择' : '不可选择'
                  }}
                </view>
              </view>
              <view style="border: #eaeaea 1rpx dashed;margin-top: 15rpx"></view>
              <view style="display: flex;margin: 20rpx 0 5rpx">
                <view style="width: 88%;font-size: 24rpx;display: flex;flex-wrap: wrap">
                  <view class="red_label" v-for="(subItem,index) in item?.award" :key="index">
                    {{ subItem }}
                  </view>

                </view>

              </view>
              <view style="border: #eaeaea 1rpx dashed;margin-bottom: 15rpx"></view>
              <view style="font-size: 24rpx;color: #AAAAAA"> {{ item.description }}
              </view>
            </view>
          </view>
          <view style="height: 68rpx"></view>
        </scroll-view>
      </view>
      <view style="margin: 0 50rpx 30rpx;">
        <view style="height: 20rpx"></view>
        <up-button
            @tap="toGetRedBag"
            text="立即领取"
            color="#ff7400"
            size="normal"
            shape="circle"
        ></up-button>
      </view>
    </view>
  </u-popup>
  <u-popup :show="show" mode="center" :round="10" width="80%" closeable @close="close">
    <view style="text-align: center;margin-top: 30rpx;font-weight: bold;font-size: 28rpx">金币充值</view>
    <view class="popup_box">
      <view v-for="(item,index) in listGold" :key="index" class="item" :class="item.isSelect?'select':'unSelect'"
            @click="clickItem(item)">
        <text>{{ item.gold_coin }}金币/{{ item.money }}元</text>
      </view>
    </view>
    <view style="margin: 0 50rpx 30rpx;display: flex">
      <up-button
          @tap="toFuLi"
          text="免费获取金币"
          color="#AAAAAA"
          size="normal"
      ></up-button>
      <view style="width: 60rpx"></view>
      <up-button
          @tap="buyGoldClick"
          text="立即充值"
          color="#ed6b4c"
          size="normal"
      ></up-button>
    </view>
  </u-popup>
  <u-popup :show="showPay" mode="bottom" :round="10" closeable @close="showPay = false">
    <view class="pay_type">选择支付方式</view>
    <view class="popup_content">
      <!-- 后台控制支付方式 -->
      <view class="pay-way">
        <view class="radio-list">
          <view style="display: flex;flex-direction: column;">
            <view class="radio-one">
              <view class="radio-left" @tap="NewradioChange" :data-type="item.type"
                    v-for="(item, index) in payTypeList" :key="index">
                <image v-if="item.name === '余额支付'" :src="BaseImgUrl + '/images/ye_icon.png'"></image>
                <image v-if="item.name === '微信支付'" :src="BaseImgUrl + '/images/wx_icon.png'"></image>
                <image v-if="item.name === '支付宝支付'" :src="BaseImgUrl + '/images/zfb_icon.png'"></image>
                <view class="radio-int">{{ item.name }}</view>
                <view class="dianji">
                  <image v-if="NewPayType === item.type" class="check_icon"
                         :src="BaseImgUrl + '/images/select_fill.png'"></image>
                  <image v-else class="check_icon" :src="BaseImgUrl + '/images/select_icon.png'"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <button class="submit" @tap="buyGold">
        立即支付
      </button>
    </view>
  </u-popup>
</template>
<style>
page {
  background-color: #ed6b4c;
  height: 100%;
  width: 100%;
}
</style>
<style scoped lang="scss">
.red_label {
  border-radius: 5rpx;
  padding: 6rpx 10rpx;
  background-color: #ffba3d;
  color: white;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.popup_box1 {
  box-sizing: border-box;
  padding: 48rpx 10rpx 20rpx 10rpx;
  max-height: 400px;
  width: 730rpx;
  display: flex;
  flex-wrap: wrap;
}

.popup_box {
  box-sizing: border-box;
  padding: 48rpx 50rpx 20rpx 50rpx;
  max-height: 400px;
  width: 660rpx;
  display: flex;
  flex-wrap: wrap;

  .item {
    border-radius: 10rpx;
    border: #888888 solid 1px;
    padding: 20rpx 0;
    width: 238rpx;
    margin-right: 30rpx;
    font-size: 26rpx;
    margin-bottom: 30rpx;
    text-align: center;
  }

  .select {
    border: #ff5c26 solid 1px;
    color: #ff5c26;
  }

  .unSelect {
    border: #dddddd solid 1px;
    color: #333333;
  }
}

.select {
  border: #ffba3d solid 1px;
  color: #ff5c26;
  box-shadow: 0 6rpx 3rpx #ffba3d33;
}

.unSelect {
  border: #ffffff solid 1px;
  color: #333333;
}

.image_f {
  width: 690rpx;
  height: 168rpx;
  border-radius: 20rpx;
  border: #ffcccc solid 2px;
}

.get_red_bag {
  height: 760rpx;
  width: 750rpx;
  margin-left: -16rpx;
  border-radius: 20rpx;
  position: relative;
}

.get_red_f {
  margin-left: 10rpx;
  position: relative;
  z-index: 2;
}

.title {
  font-weight: bold;
  font-size: 36rpx;
  color: #fbe2e2;
  text-align: center;
}

.my_gold {
  font-weight: bold;
  color: #fbe2e2;
  font-size: 28rpx;
}

.notice_box {
  //background-color: #FFFBEE;
  display: flex;
  box-sizing: border-box;
  padding: 0 0 10rpx 0;
  //margin-bottom: 20rpx;

  image {
    width: 38rpx;
    height: 38rpx;
    margin-right: 10rpx;
  }

  .desc_text {
    flex: 1;
    display: inline-block;
    font-size: 24rpx;
    color: #EF481B;
    line-height: 45rpx;
  }
}

.pay_type {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 20rpx;
}

.popup_content {
  box-sizing: border-box;
  padding-bottom: 50rpx;
}

.radio-list {
  background-color: #FFFFFF;
}

.pay-way {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 40rpx;
}

.radio-left {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 26rpx 0;
  border-top: #EAEAEA solid 1rpx;
}

.radio-left image {
  width: 58rpx;
  height: 58rpx;
  display: inline-block;
}

.radio-int {
  font-size: 26rpx;
  margin-left: 20rpx;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.dianji {
  margin-left: auto;

  image {
    width: 38rpx !important;
    height: 38rpx !important;
    opacity: .9;
  }
}

.popup_content {
  box-sizing: border-box;
  padding-bottom: 50rpx;
}

.submit {
  font-weight: bold;
  width: 90%;
  height: 100rpx;
  background: linear-gradient(to right, rgba(254, 226, 198, 1), rgba(240, 186, 138, 1));
  border-radius: 60rpx;
  font-size: 36rpx;
  color: #64462a;
  line-height: 100rpx;
}

.submit text {
  font-size: 48rpx;
  color: #ff5339;
}

.u-nav-slot {
  display: flex;
  border-radius: 60rpx;
  border: #FFFFFF solid 1px;
  padding: 6rpx 16rpx;
}

.image_content {
  width: 188rpx;
  height: 188rpx;
  border: #FFFFFF solid 8rpx;
  border-radius: 10rpx;
}
</style>